<!--
 * @Author: shawnXiao
 * @Date: 2021-12-18 19:54:33
 * @LastEditTime: 2022-01-05 12:08:40
 * @FilePath: /vite2-vue3-typescript/src/views/Home/index.vue
-->
<script lang="ts">
import { defineComponent, reactive, onMounted, ref } from 'vue'
import store from '@/store'
import moment, { Moment } from 'moment'
import { timestampToTime } from '@/common/utils'
import SchemeFormReader from '@/components/SchemeFormReader/index.vue'
import LangSelect from '@/components/LangSelect/index.vue'

export default defineComponent({
  components: {
    SchemeFormReader,
    LangSelect,
  },
  setup() {
    const dateFormat = 'YYYY/MM/DD'
    const monthFormat = 'YYYY/MM'
    const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY']
    const person = reactive({
      id: 0,
      name: 'shawnxiao',
      age: 10,
    })
    const configs: any[] = reactive([
      {
        type: 'basic',
        title: '基本数据',
        dataIndex: 1,
        noCollapse: true,
        gutter: [20, 20],
        noAction: false,
        loadings: {
          btnLoading: false,
        },
        formState: {
          name: '月月',
          date: moment(timestampToTime(new Date().getTime()), dateFormat),
        },
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
        layout: 'inline',
        btnTxt: '搜索',
        list: [
          {
            rules: [{ required: true, message: '此为必填项!' }],
            key: 'name',
            title: '姓名',
            type: 'input',
            value: '月月',
            disabled: true,
            colSpan: 12,
            labelCol: { span: 8, offset: 0 },
            wrapperCol: { span: 18, offset: 0 },
            dataIndex: 1,
          },
          {
            rules: [{ required: true, message: '此为必填项!' }],
            key: 'date',
            title: '日期',
            type: 'date',
            value: moment('2021/12/23', dateFormat),
            colSpan: 12,
            labelCol: { span: 6, offset: 0 },
            wrapperCol: { span: 18, offset: 0 },
            dataIndex: 1,
          },
        ],
      },
    ])

    const onFinish = (data: any) => {
      console.log(data, data.formState.date.format(dateFormat))
    }
    onMounted(async () => {
      console.log(store.getters['app/device'], store.getters)
    })

    return {
      value1: ref<Moment>(moment('2021/12/23', dateFormat)),
      value2: ref<Moment>(moment('01/01/2015', dateFormatList[0])),
      value3: ref<Moment>(moment('2015/01', monthFormat)),
      value4: ref<Moment[]>([moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]),
      dateFormat,
      monthFormat,
      dateFormatList,
      person,
      configs,
      onFinish,
    }
  },
})
</script>

<template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </svg>
  <SchemeFormReader :configs="configs" @onFinish="onFinish" />
  <div class="box">
    <div>
      <LangSelect />
      <p>{{ $t('title.home') }}--{{ $t('title.message') }}</p>
      <a-space direction="vertical" :size="12">
        <a-date-picker v-model:value="value1" :format="dateFormat" />
        <a-date-picker v-model:value="value2" :format="dateFormatList" />
        <a-date-picker v-model:value="value3" :format="monthFormat" picker="month" />
        <a-range-picker v-model:value="value4" :format="dateFormat" />
      </a-space>
    </div>
    <img src="/imgs/logo.png" alt="logo" />
    {{ person }}
    <div class="h1">测试测试</div>
    <div class="h2">数据</div>
  </div>
  <a-button type="primary">
    <template #icon>
      <!-- <SearchOutlined /> -->
    </template>
    Primary Button
  </a-button>
</template>

<style lang="less" scoped>
.box {
  width: 100%;
  padding: 20px;
  border: 1px solid #42b983;

  .h1 {
    color: red;
  }

  .h2 {
    color: blue;
  }
}
</style>
